<template>
    <!-- 查询条件 -->
    <el-form :inline="true" :model="searchData" class="demo-form-inline">
        <el-form-item label="采购单号">
            <el-input v-model="searchData.purchaseCode" placeholder="采购单号" clearable style="width:120px" />
        </el-form-item>
        <el-form-item label="产品编号">
            <el-input v-model="searchData.productCode" placeholder="产品编号" clearable style="width:120px" />
        </el-form-item>
        <el-form-item label="产品名称">
            <el-input v-model="searchData.productName" placeholder="产品名称" clearable style="width:120px" />
        </el-form-item>
        <el-form-item label="订单状态">
            <el-select v-model="searchData.orderState" placeholder="订单状态" clearable style="width:120px">
                <el-option label="全部" value="" />
                <el-option label="待审核" value="1" />
                <el-option label="审核成功" value="2" />
                <el-option label="审核失败" value="3" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="success" @click="getSelectList()">查询</el-button>
            <el-button type="success" @click="dialogVisible = true">添加</el-button>
        </el-form-item>
    </el-form>
    <!-- 订单列表 -->
    <el-table :data="SelectList" style="width: 100%">
        <el-table-column prop="purchaseId" label="采购单号" width="180"></el-table-column>
        <el-table-column prop="productId" label="产品编号" width="180"></el-table-column>
        <el-table-column prop="productName" label="产品名称"></el-table-column>
        <el-table-column prop="unit" label="单位" width="100"></el-table-column>
        <el-table-column prop="price" label="单价" width="100"></el-table-column>
        <el-table-column prop="productNum" label="数量" width="100"></el-table-column>
        <el-table-column prop="productTotal" label="总额" width="100"></el-table-column>
        <el-table-column prop="supplierCode" label="供应商编号" width="180"></el-table-column>
        <el-table-column prop="orderStatus" label="状态" width="100">
            <template #default="scope">
                <el-tag v-if="scope.row.orderStatus == 1" type="success">待审核</el-tag>
                <el-tag v-else-if="scope.row.orderStatus == 2" type="danger">审核成功</el-tag>
                <el-tag v-else type="warning">审核失败</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="isSendBack" label="退货" width="100">
            <template #default="scope">
                <el-tag v-if="scope.row.isSendBack == 0" type="success">未退货</el-tag>
                <el-tag v-else type="danger">已退货</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
        <!-- <el-table-column label="操作" width="180">
            <template #default="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
</el-table-column> -->
    </el-table>
    <div>
        <table style="margin: 10px auto;margin-top: 10px">
            <tr>
                <td>
                    <el-pagination v-model:current-page="page.page" v-model:page-size="page.size"
                        :page-sizes="[3, 5, 8, 10]" :hide-on-single-page="page.totalCount == 0" prev-text="上一页"
                        next-text="下一页" :background="true" layout="total, slot" :total="page.totalCount"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange">
                        <span>,每页 {{ page.size }} 条,共 {{ page.page }} / {{ page.pageCount }} 页</span>
                    </el-pagination>
                </td>
                <td>
                    <!-- 首页 -->
                    <el-pagination v-model:current-page="page.page" v-model:page-size="page.size"
                        :page-sizes="[3, 5, 8, 10]" :hide-on-single-page="page.totalCount == 0" prev-text="上一页"
                        next-text="下一页" :background="true" layout="slot, prev, pager, next" :total="page.totalCount"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange">
                        <el-button class="btn-prev" :disabled="page.page == 1"
                            @click="handleCurrentChange(1)">首页</el-button>
                    </el-pagination>
                </td>
                <td>
                    <!-- 尾页 -->
                    <el-pagination v-model:current-page="page.page" v-model:page-size="page.size"
                        :page-sizes="[3, 5, 8, 10]" :hide-on-single-page="page.totalCount == 0" prev-text="上一页"
                        next-text="下一页" :background="true" layout="slot,sizes, jumper" :total="page.totalCount"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange">
                        <el-button class="btn-prev" :disabled="page.page == page.pageCount"
                            @click="handleCurrentChange(page.pageCount)">尾页</el-button>
                    </el-pagination>
                </td>
            </tr>
        </table>
    </div>

    <el-dialog title="采购表单" width="80%" v-model="dialogVisible">
        <el-form :model="purchaseAddDTO" label-width="120px">
            <el-form-item label="采购单号">
                <el-input v-model="purchaseAddDTO.purchaseId" placeholder="请输入采购单号" />
            </el-form-item>
            <el-form-item label="单据类型">
                <el-select v-model="purchaseAddDTO.documentType" placeholder="请选择单据类型">
                    <el-option label="请选择" value="0"></el-option>
                    <el-option label="入库单" value="1"></el-option>
                    <el-option label="出库单" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="供应商名">
                <el-input v-model="purchaseAddDTO.supplierName" placeholder="请输入供应商名" />
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="purchaseAddDTO.supplierPhone" placeholder="请输入电话" />
            </el-form-item>
            <el-form-item label="收货日">
                <el-date-picker v-model="purchaseAddDTO.receiptDate" type="date" placeholder="选择日期"
                    value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="purchaseAddDTO.remark" placeholder="请输入备注" />
            </el-form-item>
            <el-form-item label="制单人">
                <el-input v-model="purchaseAddDTO.documentMaker" placeholder="请输入备注" />
            </el-form-item>
            <el-form-item label="制单时间">
                <el-date-picker v-model="purchaseAddDTO.makeOrderTime" type="date" placeholder="选择日期"
                    value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
        </el-form>
        <el-table :data="products" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="productId" label="产品编码" width="180"></el-table-column>
            <el-table-column prop="productName" label="产品名称" width="180"></el-table-column>
            <el-table-column prop="specification" label="规格" width="180"></el-table-column>
            <el-table-column label="单价" width="120">
                <template #default="{ row }">
                    ￥{{ row.price }}
                </template>
            </el-table-column>
            <el-table-column label="数量" width="200">
                <template #default="{ row }">
                    <el-input-number v-model="row.quantity" :min="1"></el-input-number>
                </template>
            </el-table-column>
            <el-table-column label="总价" width="120" align="right">
                <template #default="{ row }">
                    ￥{{ row.price * row.quantity }}
                </template>
            </el-table-column>
        </el-table>
        <div style="text-align: center;">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
        </div>
    </el-dialog>
</template>

<script setup lang="ts">
//引入组件
import { ref, reactive, onMounted, inject, computed } from 'vue'
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import http from "@/../src/api/http.js";

const router = useRouter()
const route = useRoute()
const number = ref(0)

//分页
const page = reactive({
    page: 1,
    size: 30,
    totalCount: 0,
    pageCount: 0
})

//查询条件
const searchData = reactive({
    purchaseCode: '',
    productCode: '',
    productName: '',
    orderState: 0,
})

// 使用ref来创建响应式的数据  
const dialogVisible = ref(false); // 控制对话框显示与隐藏的变量
const purchaseAddDTO = reactive({
    purchaseId: "",
    documentType: 0,
    supplierCode: "",
    supplierName: "",
    supplierPhone: "",
    receiptDate: "2024-08-29",
    remark: "",
    documentMaker: "",
    makeOrderTime: "2024-08-29",
    orderStatus: 0,
    isEntry: 0,
    isSendBack: 0,
    createTime: "2024-08-29",
    isDeleted: 0,
    ProductDTO: []
})

const MenuList = ref([])
const handleSelectionChange = (val: any) => {
    purchaseAddDTO.ProductDTO = val
}

//显示所有产品
const products = ref([])
const getProducts = () => {
    http.get('/api/PurchaseNote/SelectProductList').then(res => {
        products.value = res;
    })
}

// 添加  
const submitForm = () => {
    console.log(purchaseAddDTO)
    axios.post('http://127.0.0.1:9991/api/PurchaseNote/AddPurchaseNote', purchaseAddDTO).then(res => {
        if (res.data > 0) {
            ElMessage.success("添加成功")
            //刷新列表
            getSelectList();
            //关闭对话框
            dialogVisible.value = false;
        } else {
            ElMessage.error("添加失败")
        }
    })
}

//页容量变化
const handleSizeChange = (val: number) => {
    page.size = val;
    //刷新列表
    getSelectList();
}

//页码变化
const handleCurrentChange = (val: number) => {
    page.page = val;
    //刷新列表
    getSelectList();
}

//订单列表
const SelectList = ref([])
const getSelectList = () => {
    axios.get("http://127.0.0.1:9991/api/PurchaseNote/SelectPurchaseList", {
        params: {
            page: page.page,
            size: page.size,
            purchaseCode: searchData.purchaseCode,
            productCode: searchData.productCode,
            productName: searchData.productName,
            orderState: searchData.orderState || 0
        }
    }).then(res => {
        console.log(res)
        //赋值
        SelectList.value = res.data.item3
        //分页
        page.totalCount = res.data.item1
        page.pageCount = res.data.item2
    }).catch(err => {
        console.log(err)
    })
}

//钩子函数
onMounted(() => {
    getSelectList();
    getProducts();
})
</script>